
<script>
import {getCurrentInstance, inject, ref} from "vue";
import {postRequest} from "@/api/star_horse";
import {getUserInfo} from "@/utils/auth";

export default {
  name: "StarHorseHmenu",
  setup(props, context) {
    let dataList = ref([]);
    const {proxy} = getCurrentInstance();
    const loadMenuFun = inject("loadMenu");
    const handleSelect = (data) => {
      loadMenuFun(data);
    };
    return {
      dataList,
      handleSelect
    }
  },
  created() {
    let _this = this;
    let query = getUserInfo().idUsersinfo;
    postRequest("system-config/system/informationsEntity/getUserSystem/" + query, []).then((res) => {
      _this.dataList = res?.data?.data;
    }).catch(err => {
      console.log(err);
    });
  }
}
</script>

<style lang = "scss" scoped>
.el-menu--horizontal {
  .el-menu-item {
    height: inherit;
  }

  .el-menu-item.is-active, .el-menu-item:hover, .el-submenu__title:hover, .el-submenu__title.is-opened {
    background-color: unset !important;
  }

}

::v-deep.el-submenu__title:hover, ::v-deep.el-sub-menu:hover, .el-tooltip__trigger:hover, .el-submenu__title.is-opened {
  background-color: unset !important;
}

.sub-class {
  background-color: #3a8ee6;
  border: 1px solid red;

  div:hover {
    background-color: unset !important;
  }
}

.el-popper, .el-menu--popup-container {

  ul {
    background-color: #3a8ee6;
    border: 1px solid red;
  }

  background-color: #3a8ee6;
}

.sub-class:hover {
  background-color: unset !important;
}

.el-menu-demo {
  max-height: 50px;
  background-color: unset;
  border-bottom: none;
  color: #fff;
  font-weight: bold;
  font-size: 18px;
}

::v-deep.el-sub-menu {
  background-color: unset !important;
  broder: 1px solid red;
}

::v-deep.el-popper.is-light {
  background-color: #3a8ee6;
}
</style>
<template>
  <el-menu
      class = "el-menu-demo"
      mode = "horizontal"
      text-color = "#fff"
      active-text-color = "#ffd04b"
      background-color = "#409eff"
      @select = "handleSelect"
  >
    <template v-for = "item in dataList">
      <el-sub-menu :index = "item.idInformations" v-if =
          "item.children?.length>0">
        <template #title>
          <user-icon :icon = "item.sysLogo"
                     style = "color: #e3e9f2"></user-icon>&nbsp;&nbsp;{{ item.sysName }}
        </template>
        <template v-for = "sitem in item.children">
          <el-sub-menu
              :index = "sitem.idInformations" v-if = "sitem.children?.length>0">
            <template #title>
              <user-icon :icon = "ssitem.sysLogo"
                         style = "color: #e3e9f2"></user-icon>&nbsp;&nbsp;{{ ssitem.sysName }}
            </template>
            <el-menu-item :index = "ssitem.idInformations" v-for = "ssitem in sitem.children">
              <user-icon :icon = "ssitem.sysLogo"
                         style = "color: #e3e9f2"></user-icon>&nbsp;&nbsp;<span>{{ ssitem.sysName }}</span>
            </el-menu-item>
          </el-sub-menu>
          <el-menu-item :index = "sitem.idInformations" v-else>
            <user-icon :icon = "sitem.sysLogo"
                       style = "color: #e3e9f2"></user-icon>&nbsp;&nbsp;<span>{{ sitem.sysName }}</span>
          </el-menu-item>
        </template>
      </el-sub-menu>
      <el-menu-item :index = "item.idInformations" v-else>
        <user-icon :icon = "item.sysLogo"
                   style = "color: #e3e9f2"></user-icon>&nbsp;&nbsp;<span>{{ item.sysName }}</span>
      </el-menu-item>
    </template>
  </el-menu>
</template>
